<template>
  <div>
    <jxf-titletip :title="title" :hasGoBack="true" :hasRefresh="false" @goBack="$emit('goBack')"></jxf-titletip>
    <div class="jxf-content mt20">
      <el-card class="jxf-table-card mt10">
        <div slot="header" class="clearfix">
          <span>{{title}}</span>
        </div>
        <div class="listArea">
          <el-form :model="cityManngeInfo" ref="cityManngeInfo" :rules="rules">
            <el-form-item label="方案名称:" prop="accountName" required>
              <el-input v-model="cityManngeInfo.accountName" maxlength="25" clearable :disabled="dataInfo.pageType === '1'"></el-input>
            </el-form-item>
            <el-form-item label="城市选择：" prop="cityId" required>
              <AreaInput :searchInfo.sync="cityManngeInfo" :isDisable="dataInfo.pageType === '1'"></AreaInput>
            </el-form-item>
            <el-form-item label="星级对应账期设置:" required>
              <el-table
                :data="tableData3"
                border
                style="width: 100%">
                <el-table-column
                  prop="starName"
                  label="月度"
                  width="150">
                </el-table-column>
                  <el-table-column
                    label="对应月份费率">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.rate" :max="100" :min="0" :disabled="dataInfo.pageType === '1'">
                          <template slot="append">%</template>
                        </el-input>
                        <i class="c-red" v-if="scope.row.numWrong === 1">请输入两位小数以内的正数</i>
                        <i class="c-red" v-if="scope.row.numWrong === 2">费率不能大于100</i>
                    </template>
                  </el-table-column>
              </el-table>
              <i class="el-icon-plus addPeriod" @click="addPeriod" v-if="dataInfo.pageType !== '1'"></i>
            </el-form-item>
            <el-form-item label="备注说明:">
              <el-input
                v-model="cityManngeInfo.remark"
                autocomplete="off"
                type="textarea"
                maxlength="150"
                :autosize="{ minRows: 4, maxRows: 6}"
                placeholder="备注" :disabled="dataInfo.pageType === '1'"></el-input>
              <p class="textAreaMsg">({{cityManngeInfo.remark ? cityManngeInfo.remark.length : 0}}/150)</p>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm" v-if="dataInfo.pageType !== '1'">确认</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
  export default {
    name: "CityPeriod",
    props: {
      dataInfo: {
        type: Object,
        default: () => {}
      },
      title: {
        type: String,
        default: '城市与账期管理'
      },
      url: {
        type: String,
        default: apis.finance.addMerchantProid
      }
    },
    data() {
      return {
        cityManngeInfo: {
          provinceId: this.dataInfo.provinceId,
          cityId: this.dataInfo.cityId,
          accountName: this.dataInfo.accountName,
          remark: this.dataInfo.remark
        },
        rules: {
          accountName: [
            { required: true, message: '方案名称不能为空', trigger: ['blur', 'change'] },
          ],
          cityId: [
            { required: true, message: '城市选择不能为空', trigger: ['blur', 'change'] },
          ],
          remark: [
            { required: true, message: '备注不能为空', trigger: ['blur', 'change'] },
            { min: 1, max: 150, message: '长度不能超过150个字', trigger: ['blur', 'change'] }
          ]
        },
        tableData3: this.dataInfo && this.dataInfo.merchantSchemeStarVoList ? this.dataInfo.merchantSchemeStarVoList : []
      }
    },
    methods: {
      handleClose(done) {
        this.resetForm()
        done()
      },
      resetForm() {
        this.tableData3 = []
        this.$refs['cityManngeInfo'].resetFields()
      },
      // 加账期
      addPeriod() {
        this.tableData3.push({
          rate: "",
          starName:  '*N+' + this.tableData3.length,
          createTime: "",
          createrId: "",
          id: "",
          schemeId: "",
          updateTime: "",
          updaterId: "",
          numWrong: 0
        })
      },
      submitForm() {
        this.$refs['cityManngeInfo'].validate((valid) => {
          if(valid) {
            if(this.tableData3.length == 0) {
              this.$notify({
                title: '警告',
                message: '账期与费率设置不能为空',
                type: 'warning'
              });
              return false
            }
            // 判断返利是否有空值
            let isNull = false
            // 数组对象深拷贝
            let tableInfo = this.tableData3.map(item =>{
              return {...item}
            })
            tableInfo.forEach(item => {
              if(item.rate !== "" && (item.numWrong === undefined || item.numWrong === 0)) {
                if(item.rate != "0" ) {
                  item.rate = Math.round(item.rate * 100) / 10000
                }
              } else {
                isNull = true;
              }
              item.starName = item.starName.substring(3, item.starName.length)
            })
            if(isNull) {
              return false;
            }
            let data = {
              facMerchantScheme: {
                cityId: this.cityManngeInfo.cityId,
                accountName: this.cityManngeInfo.accountName,
                count: "",
                createTime: "",
                createrId: "",
                id: this.dataInfo.id,
                remark: this.cityManngeInfo.remark,
                updateTime: "",
                updaterId: ""
              },
              merchantStarList: tableInfo
            }
            ajax.post(this.url, data).then(res => {
              if(res.code === "10000000") {
                this.$message({
                  type: 'success',
                  message: '操作成功'
                });
                this.resetForm()
                this.$emit('fresh')
                this.$emit('goBack')
              } else {
                this.tableData3.map((item, index) => {
                  item.starName = '*N+' + item.starName
                  item.rate = item.rate ? Math.round(item.rate * 100000) / 1000 : item.rate
                });
                this.$message.error(res.message)
              }
            })
          }
        })

      }
    },
    watch: {
      tableData3: {
        handler(curVal,oldVal){
          let reg = /^\d+(\.\d{0,2})?$/
          this.tableData3.map((item, index) => {
            if(reg.test(item.rate)) {
              if(parseInt(item.rate) > 100) {
                item.numWrong = 2;
              } else {
                item.numWrong = 0;
              }
            } else {
              item.numWrong = 1
            }
          })

        },
        deep:true
      }
    }
  }
</script>

<style lang="scss" scoped>
  .el-col-11 {
    width: auto;
  }
  .el-form {
    max-width: 900px;
    min-width: 500px;
    .el-input {
      width: 300px;

    }
    .textAreaMsg {
      width: 100%;
      text-align: right;
    }
    .addPeriod {
      cursor: pointer;
    }
  }
</style>
